<template>
  <div
    class="custom-button text-white"
 
    @click="onClick"
    @touchstart="onTouchstart"
    @touchend="onTouchend"
  >
    <span><slot></slot></span>
  </div>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timer: null // 定时器
    }
  },
  mounted() {},
  methods: {
    onClick() {
      if (this.disabled) return

      this.$emit('click')
    },
    onTouchstart() {
      this.timer = setTimeout(() => {
        // 触发长按事件
        this.$emit('long-press')
      }, 1000)
    },
    onTouchend() {
      clearTimeout(this.timer)
      this.timer = null
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-button {
  font-size: 26px;
  text-align: center;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 70px;
  background: linear-gradient(82deg, #6ecdff 0%, #00a7ff 100%);
  border-radius: 40px 40px 40px 40px;
}
</style>
